<template>
	<view class="main">
		<uni-nav-bar fixed left-icon="back" title="收货地址" color="#333333" backgroundColor="#FFFFFF" :border="false" statusBar
			@clickLeft="goReturn" rightIcon="compose" @clickRight="edit"></uni-nav-bar>
		
		<view class="form-data">
			<uni-forms ref="form" :modelValue="formData" :rules="rules" label-position="top" label-width="20">
				<uni-forms-item label="姓名" name="ship_username">
					<uni-easyinput type="text"  v-model="formData.ship_username" placeholder="请输入姓名" :clearable="isEdit"/>
				</uni-forms-item>
				<uni-forms-item label="手机号" name="phone">
					<uni-easyinput type="text" v-model="formData.phone" placeholder="请输入手机号" maxlength="13" :clearable="isEdit"/>
				</uni-forms-item>
				<uni-forms-item label="所在地区" name="area"  >
					<uni-easyinput type="text" v-model="formData.area" placeholder="请选择地区" @focus="openPicker" :clearable="isEdit"/>
					<lotus-address v-on:choseVal="choseValue" :lotusAddressData="lotusAddressData"></lotus-address>
				</uni-forms-item>
				<uni-forms-item label="详细地址" name="address">
					<uni-easyinput type="text" v-model="formData.address" placeholder="请输入详细地址" :clearable="isEdit"/>
				</uni-forms-item>
			</uni-forms>
			<view class="submit">
				<button class="btn" type="default" @click="submit" v-show="isEdit" :loading="isLoading" :disabled="isLoading">确认</button>
			</view>
		</view>
		
		 
	</view>
</template>

<script>
	import lotusAddress  from '../../../components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue'
	export default {
		 components:{
			lotusAddress
		},
		data() {
			return {
				isLoading:false,
				isEdit:false,
				 // 表单数据
				 formData: {
				 	ship_username: '',
				 	phone: '',
					address:'',
					area:''
				 },
				 lotusAddressData:{
					 visible:false,
					 provinceName:'',
					 cityName:'',
					 townName:'',
				 },
				 rules: {
				 	ship_username: {
				 		rules: [
				 			{required: true,errorMessage: '请输入姓名'}
				 		]
				 	},
				 	phone: {
				 		rules: [
				 			{required: true,errorMessage: '请输入手机号'}
				 		]
				 	},
					address: {
						rules: [
							{required: true,errorMessage: '请输入详细地址'},
						]
					},
					area:{
						rules: [
							{required: true,errorMessage: '请选择地区'},
						]
					}
				 }
			}
		},
		onLoad() {
			this.getAddress()
		},
		methods: {
			getAddress(){
				this.$http.get('/v1/get_address_list',res => {
					var arr = res.data.list
					if(arr && arr.length > 0){
						this.formData = arr [0]
					}else{
						this.isEdit = true
					}
				})
			},
			edit(){
				this.isEdit = true
			},
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res=>{
					this.isLoading = true
					this.$http.post('/v1/add_ship_address',this.formData,res => {
						if(res.code == 200){
							uni.showToast({
								 icon: 'none',
								 title: '设置成功',
							})
						}
						this.isLoading = false
						this.isEdit = false
					})
				}).catch(err =>{
					console.log('表单错误信息：', err);
				})
			},
			//打开picker
			openPicker() {
				if(this.isEdit){
					this.lotusAddressData.visible = true;
					this.lotusAddressData.provinceName = '';
					this.lotusAddressData.cityName = '';
					this.lotusAddressData.townName = '';
					if(this.formData.area){
						var arr = this.formData.area.split(" ");
						if(arr.length == 3){
							this.lotusAddressData.provinceName = arr[0];
							this.lotusAddressData.cityName = arr[1];
							this.lotusAddressData.townName = arr[2];
						}
					}
					
				}
			},
			 //回传已选的省市区的值
			choseValue(res){
				//res数据源包括已选省市区与省市区code
				console.log(res);
				this.lotusAddressData.visible = res.visible;//visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if(res.isChose){
					this.lotusAddressData.provinceName = res.province;//省
					this.lotusAddressData.cityName = res.city;//市
					this.lotusAddressData.townName = res.town;//区
					this.formData.area = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
				}
			},
			// 返回
			goReturn() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss">
	 .form-data{
		 /deep/.uni-easyinput__content{
			border: none;
			border-bottom: 1px solid #f2f2f2;
		 }
		 /deep/.uni-forms-item__label{
			 font-size: 32upx;
			 color: #333333;
			 font-weight: 600;
		 }
		 .submit{
			 width: 100%;
			 margin-top: 150upx;
			 .btn{
				 width: 400upx;
				 height: 80upx;
				 line-height: 80upx;
				 border-radius: 40upx;
			 }
		 }
	 }
</style>
